<template>
  <view class="kui-box-border kui-collapse-panel">
    <view
      class="
        kui-flex
        kui-justify-between
        kui-px-4
        kui-h-10
        kui-items-center
        kui-border-0
        kui-border-solid
      "
      :class="{
        'kui-border-b': !data.isOpen,
        'kui-opacity-30': data.isOpen && activeTitleTapedState,
        'kui-opacity-40': disabled,
      }"
      :style="{
        backgroundColor: data.backgroundColor,
        borderColor: data.isBorder ? data.borderColor : 'transparent',
      }"
      @click="onClick(!data.isOpen)"
    >
      <slot name="title">
        <view class="">
          <text
            class="kui-subpixel-antialiased"
            :style="{
              color: data.color,
            }"
            >折叠面板标题</text
          >
        </view>
      </slot>
      <template v-if="$slots['arrow-icon']">
        <slot name="arrow-icon"></slot>
      </template>
      <template v-else>
        <view
          class=""
          :class="{
            'kui-transform -kui-rotate-180': data.isOpen,
            'kui-collapse-panel--animation': animation,
          }"
        >
          <kui-icons
            type="cheveron-down"
            color="#999"
            :weight="800"
            :size="36"
          ></kui-icons>
        </view>
      </template>
    </view>
    <view
      class="
        kui-box-border
        kui-collapse-panel_wrap
        kui-overflow-hidden kui-h-24
      "
      :class="{ 'is--transition': animation, 'kui-h-24': data.isOpen }"
      :style="{
        height: (data.isOpen ? data.height : 0) + 'px',
        backgroundColor: data.wrapBackgroundColor,
      }"
    >
      <view
        :id="elId"
        class="kui-px-4 kui-py-3 kui-antialiased"
        :style="{
          color: data.textColor,
		  lineHeight: 1.4
        }"
      >
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
/**
	 * CollapsePanel 折叠面板组件
	 * @description 折叠面板内组件
	 * @property {Boolean} open = [true/false] 是否展开
	 * 	@value true 是
	 * 	@value false 否
	 * @property {Boolean} showAnimation = [true/false] 是否开启动画
	 * 	@value true 是
	 * 	@value false 否
	 * @property {Boolean} disabled = [true/false] 是否禁用 
	 * 	@value true 是
	 * 	@value false 否
	 * @property {Number, String} name 唯一标识符 
	 * @property {String} backgroundColor 背景颜色
	 * @property {String} color 字体颜色
	 * @property {String} borderColor 底框颜色
	 * @property {String} wrapBackgroundColor 内容背景色
	 * @property {String} mode = [light/dark/system] 页面模式
	 * 	@value light 亮色模式
	 * 	@value dark 暗色模式
	 * 	@value system 跟随系统
	 * @property {Boolean} showActiveTitleTapedState = [true/false] 是否开启标题点击态
	 * 	@value true 是 点击后标题插槽透明度降低
	 * 	@value false 否 点击后标题插槽透明度不变
	 * @template <kui-collapse>
					<kui-collapse-panel>
						<view class="">
							<text>自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容自定义内容</text>
						</view>
					</kui-collapse-panel>
				</kui-collapse>
	 */
import { reactive, getCurrentInstance, onMounted, watch, inject, defineComponent } from "vue";

import { getElId } from '../../common/utils/element';

const name = 'kui-collapse-panel';

import CollapsePanelProps from './props';

export default defineComponent({
	name,
	props: CollapsePanelProps,
	setup(props) {
		// 获取实例
		const { proxy, appContext }: any = getCurrentInstance();
		const $theme = proxy.$theme;
		
		// 随机生成元素ID
		const elId = getElId();
		
		const data = reactive({
		  elId: elId,
		  isBorder: false,
		  isOpen: false,
		  height: 0,
		  mode: props.mode,
		  name: props.name,
		  backgroundColor: props.backgroundColor ? props.backgroundColor : "#FFFFFF",
		  color: props.color ? props.color : "#000000",
		  textColor: props.textColor ? props.textColor : '#000000',
		  borderColor: props.borderColor
		    ? props.borderColor
		    : $theme.colors["light"]["grey"][2],
		  wrapBackgroundColor: props.wrapBackgroundColor,
		});
		
		/**
		 * 获取父元素实例
		 */
		const getCollapse = () => {
		  return inject('collapse');
		};
		
		const getCollapsePanelHeight = () => {
		  const elQuery = uni.createSelectorQuery().in(proxy);
		  elQuery
		    .select(`#${elId}`)
		    .fields(
		      {
		        size: true,
		      },
		      (res) => {
		        data.height = res.height;
		      }
		    )
		    .exec();
		};
		
		const collapse = getCollapse();
		
		const init = () => {
		  getCollapsePanelHeight();
		  // 样式处理
		  data.backgroundColor =
		    data.mode == "light"
		      ? props.backgroundColor
		        ? props.backgroundColor
		        : "#FFFFFF"
		      : props.backgroundColor
		      ? uni.kviewUIColor.generate(data.backgroundColor, {
		          dark: true,
		          list: false,
		          index: 6,
		        })
		      : "#333333";
		  data.color =
		    data.mode == "light"
		      ? props.color
		        ? props.color
		        : "#000000"
		      : props.backgroundColor
		      ? uni.kviewUIColor.generate(props.backgroundColor, {
		          dark: true,
		          list: false,
		          index: 6,
		        })
		      : "#FFFFFF";
		  data.borderColor =
		    data.mode == "light"
		      ? $theme.colors["light"]["grey"][2]
		      : $theme.colors["dark"]["grey"][2];
		  data.wrapBackgroundColor =
		    data.mode == "light"
		      ? props.wrapBackgroundColor
		        ? props.wrapBackgroundColor
		        : $theme.colors["light"]["grey"][2]
		      : props.wrapBackgroundColor
		      ? uni.kviewUIColor.generate(props.wrapBackgroundColor, {
		          dark: true,
		          list: false,
		          index: 6,
		        })
		      : $theme.colors["dark"]["grey"][2];
		};
		
		const changeMode = () => {
		  data.backgroundColor =
		    data.mode == "light"
		      ? props.backgroundColor
		        ? props.backgroundColor
		        : "#FFFFFF"
		      : props.backgroundColor
		      ? uni.kviewUIColor.generate(data.backgroundColor, {
		          dark: true,
		          list: false,
		          index: 6,
		        })
		      : "#333333";
		  data.color =
		    data.mode == "light"
		      ? props.color
		        ? props.color
		        : "#000000"
		      : props.color
		      ? uni.kviewUIColor.generate(props.color, {
		          dark: true,
		          list: false,
		          index: 6,
		        })
		      : $theme.colors["dark"]["grey"][8];
		  data.borderColor =
		    data.mode == "light"
		      ? $theme.colors["light"]["grey"][2]
		      : $theme.colors["dark"]["grey"][2];
		  data.wrapBackgroundColor =
		    data.mode == "light"
		      ? props.wrapBackgroundColor
		        ? props.wrapBackgroundColor
		        : $theme.colors["light"]["grey"][2]
		      : props.wrapBackgroundColor
		      ? uni.kviewUIColor.generate(data.wrapBackgroundColor, {
		          dark: true,
		          list: false,
		          index: 6,
		        })
		      : $theme.colors["dark"]["grey"][2];
		};
		
		const mounted = onMounted(() => {
		  // 判断父元素实例没有包含子元素实例，则初始化子元素实例操作
		  if (collapse.childrens.indexOf(data) === -1) {
		    collapse.childrens.push(data);
		  }
		  init();
		  // 监听暗黑模式
		  uni.$on("changeMode", (e) => {
		    data.mode = e;
		    changeMode();
		  });
		});
		
		watch(
		  () => props.open,
		  (val) => {
		    data.isOpen = val;
		  }
		);
		
		const onClick = (isOpen: boolean) => {
		  if (!props.disabled) {
		    data.isOpen = isOpen;
		    collapse.setAccordion(elId);
		    collapse.onChange(isOpen, elId);
		  }
		}
		
		return {
			data,
			onClick,
			changeMode,
			elId
		}
	}
});
</script>

<style lang="scss">
.kui-collapse-panel {
  &--animation {
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }

  &_wrap {
    will-change: height;
    height: 0;
    &.is--transition {
      transition-property: height, border-bottom-width;
      transition-duration: 0.3s;
      will-change: height;
    }
  }
}
</style>